<template>
  <div class="Home">
    <div class="skillLeft">
        <div class="Logo">
            <img src="../assets/Logo.png" alt="">
            <h5>上海正也医药科技有限公司</h5>
        </div>
        <div class="nav_left">
           <ul>
              <li>
                <router-link to="/"><span class="iconfont icon-xinwenbijixuexineirongmeiti"></span><strong>功能功能功能A</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>
              <li>
                <router-link to="/"><span class="iconfont icon-wenjianbao"></span><strong>功能功能B</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>
              <li>
                <router-link to="/"><span class="iconfont icon-zhaopian"></span><strong>功能功能C</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>
              <li>
                <router-link to="/"><span class="iconfont icon-rizhifenxi"></span><strong>功能功能功能D</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>

              <li>
                <router-link to="/"><span class="iconfont icon-fanghu"></span><strong>功能功能E</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>
              <li>
                <router-link to="/"><span class="iconfont icon-gongnenglan-xitonggongneng"></span><strong>功能功能F</strong></router-link>
                <p><span class="iconfont icon-jinrujiantouxiao"></span></p>
              </li>
           </ul>
        </div>
    </div>
    <div class="container-fluid">
      
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
              <!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li>
                    <p><img src="../assets/static/images/navbar1.png" alt=""></p>
                    <a href="#">首页</a>
                  </li>
                  <li>
                    <p><img src="../assets/static/images/navbar2.png" alt=""></p>
                    <a href="#">主数据</a>
                  </li><li>
                    <p><img src="../assets/static/images/navbar3.png" alt=""></p>
                    <a href="#">辖区管理</a>
                  </li>
                  <li class="active" id="Logo_active">
                    <img src="../assets/static/images/navbar4.png" alt="">
                    <a href="#">销讯通</a>
                    <p> <span>行为管理系统发</span></p>
                  </li>
                </ul>
              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
  
      <div class="content">
        <div class="content_top">
            <p>首页/年度协议管理/二级商协议/新增二级商协议</p>
            <h4>新增二级商协议</h4>
        </div>
        <div class="content_main">
              <div class="dashed"> 
                <hr>
                <p><span class="badge ">1</span><strong>协议主体</strong></p>
              </div>
              <!-- top -->
              <div class="agreeMent">
                      <div class="row">
                         <div class="col-md-6">
                            <ul>
                                <li>
                                    <span style="color:red;">*</span>协议客户: <button class="btn btn-default" type="submit">选择客户</button>上海正业医药有限公司<br>
                                </li>
                                <li>
                                    <div class="dropdown">
                                       &nbsp;购进指标：
                                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                          金额
                                          <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                          <li><a href="#">Action</a></li>
                                          <li><a href="#">Another action</a></li>
                                          <li><a href="#">Something else here</a></li>
                                          <li role="separator" class="divider"></li>
                                          <li><a href="#">Separated link</a></li>
                                        </ul>
                                        <div class="form-group">
                                            <input type="password"  class="form-control " id="exampleInputPassword1" placeholder="输入金额/数量">
                                          </div>
                                      </div>
                                </li>
                                <li class="sale">
                                    &nbsp;销售区域: <button class="btn btn-default" type="submit">选择区域</button>
                                    <button class="btn btn-default city" type="submit">全国</button><em class="glyphicon glyphicon-remove"></em>
                                </li>
                                <li> 
                                    <div class="dropdown dropdownLast">
                                        &nbsp;购进渠道:
                                         <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                            &nbsp;指定渠道
                                           <span class="caret"></span>
                                         </button>
                                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                           <li><a href="#">Action</a></li>
                                           <li><a href="#">Another action</a></li>
                                           <li><a href="#">Something else here</a></li>
                                           <li role="separator" class="divider"></li>
                                           <li><a href="#">Separated link</a></li>
                                         </ul>
                                         <button class="btn btn-default">请选择渠道</button>
                                       </div>

                                </li>
                            </ul> 
                         </div>
                         <div class="col-md-6">
                            <ul>
                                <li>
                                    <div class="dropdown">
                                        协议状态:
                                         <button class="btn btn-default dropdown-toggle pagy" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                           正常
                                           <span class="caret"></span>
                                           <em class="glyphicon glyphicon-chevron-down"></em>
                                         </button>
                                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                           <li><a href="#">Action</a></li>
                                           <li><a href="#">Another action</a></li>
                                           <li><a href="#">Something else here</a></li>
                                           <li role="separator" class="divider"></li>
                                           <li><a href="#">Separated link</a></li>
                                         </ul>
                                       </div>
                                </li>
                                <li> 
                                     <div class="form-group pagy2">
                                         纯销指标:<button class="btn btn-default">金额</button>
                                         <input type="password"  class="form-control " id="exampleInputPassword1" placeholder="输入金额/数量">
                                    </div>
                                </li>
                                <li>
                                    <div class="form-group time">
                                         签订时间:
                                         <input type="date"  class="form-control " id="exampleInputPassword1" placeholder="2023-02-11  18:25">
                                   </div>
                                </li>
                            </ul>
                        </div>
                      </div>
                      <table class="table table-condensed">
                        <thead>
                          <tr class="active">
                            <th>指定渠道代码</th>
                            <th>指定渠道名称</th>
                            <th>所在省</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>BJ000090</td>
                            <td>宁波九州通药业有限公司</td>
                            <td>浙江省</td>
                          </tr>
                          <tr>
                            <td>BJ0000192</td>
                            <td>国药控股精华有限公司</td>
                            <td>陕西       省</td>
                          </tr>
                          <tr>
                            <td>BJ0000183</td>
                            <td>老百姓药业有限公司</td>
                            <td>四川省</td>
                          </tr>
                        </tbody>
                      </table>
              </div>
              <!-- content -->
              <div class="dashed  dashedx"> 
                <hr>
                <p><span class="badge ">2</span><strong>产品政策</strong></p>
              </div>
              <div class="poLicy">
                 <button type="button" class="btn btn-primary">添加产品</button>
                 <span>购进总指标&nbsp;&nbsp;(万元):</span><strong>￥152.65</strong>
                 <span>按指标季度分解&nbsp;&nbsp;(万元):</span><strong>[Q1]&nbsp;&nbsp;￥12.5,</strong>
                 <strong>[Q2]&nbsp;&nbsp;￥12.5,</strong><strong>[Q3]&nbsp;&nbsp;￥12.5,</strong>
                 <strong>[Q4]&nbsp;&nbsp;￥12.5,</strong>
                 <span>纯销售总指标&nbsp;&nbsp;(万元):</span><strong>￥152.65</strong>
              </div>
              <div class="products">
                  <span>产品：</span>
                  <button type="button" class="btn btn-default">选择产品</button>
                  <em>美复胶丸  24粒/盒</em>
                  <span style="margin-left:108px;">协议效期：</span> <input type="text" class="form-control" id="exampleInputName2" placeholder="2022-02-01~2023-05-01">
                  <p><button type="button" class="btn btn-default">删除</button></p>
                    
              </div>
              <div class="panelX">
                <div class="panel panel-default">
                  <div class="panel-heading">
                       <strong>协议价（元）</strong>
                       <strong>票价（元）</strong>
                       <strong>购进指标量（大单位）</strong>
                       <strong>购进指标量（小单位）</strong>
                       <strong>购进金额（万元）</strong>
                       <strong>纯销指标量（小单位）</strong>
                       <strong>纯销指标金额（万元）</strong>
                  </div>
                  <div class="panel-body">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                     <input type="text" class="form-control" placeholder="请输入">
                  </div>
                </div>
                <div class="panel panel-default">
                  <div class="panel-heading" style="display:flex;">
                       <strong>分勤奖励</strong>
                       <strong>费用科目</strong>
                       <strong>零售配送</strong>
                       <strong>费用科目</strong>
                       <strong>医疗配送商</strong>
                       <strong>费用科目</strong>
                       <strong>自定义7</strong>
                       <strong>自定义8</strong>
                  </div>
                  <div class="panel-body">
                     <input type="text" class="form-control" placeholder="请输入">
                     <div class="dropdown">
                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        单选项1
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                     <input type="text" class="form-control" placeholder="请输入">
                     <div class="dropdown">
                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        单选项2
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                     <input type="text" class="form-control" placeholder="请输入">
                     <div class="dropdown">
                      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        单选项3
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                     <input type="date" class="form-control" placeholder="2022-05-15">
                     <input type="date" class="form-control" placeholder="2023-05-15">
                  </div>
                </div>
              </div>
              <div class="dashed  dashedx"> 
                <hr>
                <p><span class="badge ">2</span><strong>补充协议</strong></p>
              </div>
              <!-- 选项卡切换 -->
              <div class="navTabs">
                <div class="navbarDel">
                  <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#home">协议内容1</a></li>
                    <li><a data-toggle="tab" href="#menu1">协议内容2</a></li>
                    <li><a data-toggle="tab" href="#menu2">协议内容3</a></li>
                  </ul>
                  <button class="btn btn-default" type="submit">新增</button>
                </div>
                <div class="tab-content">
                  <div id="home" class="tab-pane fade in active">
                    <div class="tab-paneDel">
                      <p>协议内容1:</p>
                      <button class="btn btn-default" type="submit">删除</button>
                    </div>
                    <div class="tab_pane_text "></div>
                  </div>
                  <div id="menu1" class="tab-pane fade">
                    <div class="tab-paneDel">
                      <p>协议内容2:</p>
                      <button class="btn btn-default" type="submit">删除</button>
                    </div>
                    <div class="tab_pane_text"></div>
                  </div>
                  <div id="menu2" class="tab-pane fade">
                    <div class="tab-paneDel">
                      <p>协议内容3:</p>
                      <button class="btn btn-default" type="submit">删除</button>
                    </div>
                    <div class="tab_pane_text"></div>
                  </div>
                </div>
              </div>
              <div class="addBtn">
                <button class="btn btn-default" type="submit">保存</button>
              </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// $(function () {
//     alert(123);
// });

export default {
  name: "home",
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.Home {
    background: #F5F5F5;
    max-width: 100%;
    margin:0 auto;
    display: flex;
    justify-content: center;
    .skillLeft{
        width: 280px;
        position: relative;
        left: 0;
        background: #2A3139;
        padding: 20px 20px;
        .Logo{
             img{
                width: 100%;
                height: 20%;
             }
             h5{
                color: #A7A8AA;
                text-align: left;
                margin-left: 5px;
             }
        }
        .nav_left{
            ul{
                li{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    list-style: none;
                    color: #A7A8AA;
                    height: 60px;
                    line-height: 60px;
                  a{
                    color: #A7A8AA; 
                    strong{
                        padding-left: 20px;
                        font-size: 18px;
                    }
                    span{
                        font-size: 20px;
                        margin-left: -35px;
                    }
                  }       
                }
            }
        }

    }
    .container-fluid{
        width: 100%;
        padding: 0;
        padding-left: 0;
        margin: 0;
        .navbar{
            max-width:100% ;
            padding: 0;
            border: 0;
            border-radius: 0;
            height: 88px;
            line-height: 88px;
            padding-left: 15px;
            background: #2A3139;
                ul{
                    li{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 20px;
                        padding: 0 10px;
                        margin-top: -2px;
                    }
                    #Logo_active{
                       
                        a{
                           display: block;
                           background-color: #2A3139;
                           margin-top: -18px;
                           font-size: 28px;
                        }
                        p{  
                            margin: 0;
                            z-index: 9999;
                            span{
                                display: block;
                                font-size: 10px;
                                color: #ffffff;
                               position: relative;
                               top: 18px;
                               left: -100px;
                               
                              
                            }
                        }
                        
                    }
                }
        }
        .content{
            .content_top{
               text-align: left;
               background-color: white;
               height: 88px;
               padding: 20px;
               margin-top: -20px;
               p{
                  color: #A7A8AA;
               }
               h4{
                font-size: 20px;
               }
            }
            .content_main{
                padding: 20px;
                .dashed{
                    hr{
                        border:1px dashed #E7E7E7;
                        margin-top: 10px ;
                    }
                    p{
                        margin-top: -35px;
                        z-index: 9999;
                        span{
                            background-color: #4C8DFD;
                            margin-right: 10px; 
                        }
                        .badge{
                          font-size: 16px;
                        }
                        strong{
                            font-size: 20px;
                            padding: 0;
                        }
                    }
                }
                .agreeMent{
                    background: white;
                    text-align: left;
                    .row{
                      margin-left: -40px;
                        ul{
                            li{
                                list-style: none;
                                padding: 10px 0;
                                .dropdown{
                                    button{
                                        width: 83px;
                                        margin-left: 0px;
                                    }
                                    .pagy{
                                        width: 200px;
                                        text-indent: -160px;
                                        button{
                                        background: #F5F5F5;
                                        }
                                        .glyphicon-chevron-down{
                                           position: relative;
                                           left: 230px;
                                        }
                                    }
                                    .form-group{
                                        width: 500px;
                                        margin-left: 170px;
                                        margin-top: -35px;
                                        input{
                                            background-color: #F8F8F8;
                                        }
                                    }
                                }
                                button{
                                    margin-right: 10px;
                                    margin-left: 10px;
                                 }
                                 .city{
                                    width: 90px;
                                    border: 1px solid #4C8DFD;
                                    color: #4C8DFD;
                                    text-indent: -40px;
                                    margin-left: 0px;
                                 }
                                 em{
                                    margin-left: -30px;
                                    color: #4C8DFD;
                                 }
                                 .pagy2{
                                    button{
                                        width: 100px;
                                        text-indent: -50px;
                                        margin-left: 5px;
                                     }
                                     input{
                                        width: 500px;
                                        margin-left: 180px;
                                        margin-top: -35px;
                                        background: #F8F8F8;
                                     }
                                 }
                                 .time{
                                    input{
                                        width: 615px;
                                        margin-left: 65px;
                                        margin-top: -30px;
                                    }
                                 }
                            }
                            .sale{
                               margin-top: -15px;
                            }
                            .dropdownLast{
                                .dropdown-toggle{
                                    margin-left: 10px;
                                }
                            }
                            
                        }
                      
                    }
                    table{
                        max-width: 90%;
                        margin:0 auto;
                    }
                }
                .dashedx{
                  margin-top: 20px;
                }
                .poLicy{
                     text-align: left;
                     width: 80%;
                     display: flex;
                     justify-content: space-between;
                      button{
                      background: #4F8CFF;
                     }
                     span{ 
                       color: #666;
                       font-size: 18px;
                     }
                     strong{
                       font-size: 18px;
                     }
                }
                .products{
                  margin-top: 10px;
                  text-align: left;
                  height: 60px;
                  line-height: 60px;
                  background-color: #fff;
                    span{
                         margin-left: 50px;
                    }
                    em{
                      font-style:normal;
                      margin-left: 20px;
                      color: #4C8DFD;
                    }
                    input{
                      width: 200px;
                      margin-left: 480px;
                      margin-top: -48px;
                    }
                    p{
                      text-align: right;
                      margin-top: -46px;
                      margin-right: 10px;
                      button{
                        color: orange;
                      }
                    }
                   
                }
                .panelX{
                  margin-top: 2px;
                  background-color: #fff;
                  padding: 15px;
                  .panel{
                    width: 100%;
                    margin: 0 auto;
                    .panel-heading{
                      text-align: left;
                      display: flex;
                      justify-content: space-around;
                       strong{
                        margin-left: -80px;
                       }
                    }
                    .panel-body{
                     display: flex;
                      justify-content: space-around;
                        input{
                          margin: 0 10px;
                          background-color: #F8F8F8;
                        }
                        .dropdown{
                          button{
                            width: 200px;
                          }
                        }
                    }
                  }

                }
                .navTabs{
                  .navbarDel{
                     display: flex;
                     justify-content: space-between;
                    .nav-tabs{
                      li{
                        
                        a{
                          margin-right: 0px;
                          border-radius:0;
                          border: 1px solid silver;
                          color: #A7A8AA;
                          background-color: #fff;
                        }
                        a:hover{
                          color: #4F8CFF;
                        }
                      }
                    }
                    button{
                      background: #4F8CFF;
                      color: #fff;
                      border-radius: 8px;
                      width: 80px;
                      font-size: 20px;
                    }
                  }
                 
                
                  .tab-content{
                    text-align: left;
                    background: #fff;
                    padding: 15px;
                    .tab-pane{
                      font-size: 18px;
                      .tab-paneDel{
                        display: flex;
                        justify-content: space-between;
                        button{
                          color: orange;
                        }
                      }
                      .tab_pane_text{
                           padding: 20px;
                           width: 100%;
                           height: 200px;
                           background: #F5F5F5;
                       }
                    }
                 
                  }
                }
                .addBtn{
                  text-align: left;
                  background: #fff;
                  margin-top: 2%;
                  padding: 20px;
                   button{
                    width: 100px;
                    height: 60px;
                    font-size: 22px;
                    background: #4F8CFF;
                    color: #fff;
                    border-radius: 10px;
                   }
                }
              
            }
        }
    }
}
</style>
